<template>
    <div class="progress-bar" :style="{ backgroundColor: bg, borderRadius: this.radius ? '20px' : 0}">
        <div class="progress" :style="{ width: progress + '%' , backgroundColor: backgroundColor, borderRadius: this.radius ? '20px' : 0}"></div>
    </div>
</template>

<script>
    export default {
        props: {
            progress: {
                type: Number,
                required: true,
                validator: (value) => {
                    return value >= 0 && value <= 100;
                }
            },
            backgroundColor: {
                type: String,
                default: () => '#76c7c0'
            },
            bg: {
                type: String,
                default: () => '#F2F2F2'
            },
            radius: {
                type: Boolean,
                default: () => false
            },
        }
    };
</script>

<style scoped lang="scss">
    .progress-bar {
        width: 100%;
        height: 100%;
        background-color: #F2F2F2;
        //border-radius: 10px;
        overflow: hidden;
    }
    .progress {
        height: 100%;
        transition: width 0.3s ease;
    }
</style>
